<template>
  <div class="component">
    <h2>模板列表</h2>
    
    <div v-if="templates.length === 0" class="empty-state">
      暂无模板，请创建新模板
    </div>
    
    <table v-else>
      <thead>
        <tr>
          <th>名称</th>
          <th>描述</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="template in templates" :key="template.id">
          <td>{{ template.name }}</td>
          <td>{{ template.description || '-' }}</td>
          <td>{{ formatDate(template.createdAt) }}</td>
          <td>
            <button 
              @click="emit('load', template)" 
              class="tab-button btn-primary"
            >
              编辑
            </button>
            <button 
              @click="emit('delete', template.id)" 
              class="tab-button btn-danger"
              style="margin-left: 4px"
            >
              删除
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import type { Template } from '../utils/storage';

defineProps<{
  templates: Template[];
}>();

const emit = defineEmits<{
  load: [template: Template];
  delete: [id: string];
}>();

// 格式化日期
const formatDate = (dateString?: string): string => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleString();
};
</script>

<style scoped>
.empty-state {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-secondary);
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border-radius: var(--radius-md);
  border: 2px dashed var(--border-color);
  font-size: 14px;
}

.empty-state::before {
  content: '📝';
  display: block;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.tab-button {
  padding: 8px 16px;
  font-size: 13px;
}
</style>
